<template>
	<view class="container">
		<view class="tabContainer statusBarHeight">
			<u-tabs :list="listUtabs" active-color="#16a5fe" inactive-color="#606266"
				:itemStyle="{width:'175rpx',height: '80rpx'}" :lineHeight="'6rpx'" :lineWidth="'60rpx'"
				:current="currentUtabs" @change="onChangeUtabs">
			</u-tabs>
			<view class="timeWrapper">
				<view class="item" :class="{itemEn: selectObj.selectType == 0}" @click="onChangeSelectType(0)">
					今天
				</view>
				<view class="item" :class="{itemEn: selectObj.selectType == 1}" @click="onChangeSelectType(1)">
					昨天
				</view>
				<view v-if="selectObj.selectType==2" class="item itemEn" :class="{itemEn: selectObj.selectType == 2}" @click="showCalendar=true">
					{{selectObj.startDay}}
					<view class="iconRange">
					</view>
					{{selectObj.endDay}}
				</view>
				<view v-else class="item" @click="showCalendar=true">
					自定义
				</view>

			</view>
		</view>
		

		<statisticUser v-if="currentUtabs==0"
			:selectObj="selectObj"
			ref="statisticUserRef"
		></statisticUser>	

		<statisticContent v-if="currentUtabs==1"
			:selectObj="selectObj"
			ref="statisticContentRef"
		></statisticContent>		

		<statisticShare v-if="currentUtabs==2"
			:selectObj="selectObj"
			ref="statisticShareRef"
		></statisticShare>	

		<statisticSeller v-if="currentUtabs==3"
			:selectObj="selectObj"
			ref="statisticSellerRef"
		></statisticSeller>	



		<view class="" style="height: 250rpx;">

		</view>
		<u-calendar :show="showCalendar"
			:round="'20rpx'"
			:maxRange="'31'" 
			:minDate="calendar.minDate" 
			:maxDate="calendar.maxDate" 
			:defaultDate="calendar.defaultDate"
			confirmDisabledText="请选择结束日期"
			:monthNum="14"
			:mode="'range'" @close="showCalendar=false"
			 @confirm="onChangeCalendar">
		</u-calendar>
	</view>
</template>

<script>
	let timeId = null
	const api = require('@/static/js/api.js')
	const utils = require("@/static/js/utils.js")
	import { mapState, mapMutations, mapActions } from "vuex";
	import statisticUser from "./statisticUser.vue"
	import statisticContent from "./statisticContent.vue"
	import statisticShare from "./statisticShare.vue"
	import statisticSeller from "./statisticSeller.vue"	
	let that = null
	export default {
		data() {
			return {
				//===顶部tab==========================================
				listUtabs: [
					{
						name: '用户'
					}, 
					{
						name: '内容'
					}, 
					{
						name: '分享'
					}, 
					
				],
				currentUtabs: 0,
				//===顶部tab end======================================
				selectObj:{
					selectType: 0,
					startDay: "",
					endDay: "",
				},		
	
				
				calendar:{
					minDate: "",
					maxDate: "",
					defaultDate: "",
				},
				showCalendar: false,
			};
		},
		computed: {
			...mapState({
				hasLogin: (state) => state.userInfo.hasLogin,
				isAuthPhone: (state) => state.userInfo.isAuthPhone,
				isAuthUserInfo: (state) => state.userInfo.isAuthUserInfo,
				isSeller: (state) => state.userInfo.isSeller,
				sellerObj: (state) => state.userInfo.sellerObj,
				buyerObj: (state) => state.userInfo.buyerObj,
				shopInfo: (state) => state.userInfo.shopInfo,
			}),
		},
		components: {
			statisticUser,
			statisticContent,
			statisticShare,
			statisticSeller
		},
		props: {
			
		},
		watch: {
			
		},
		created() {
			this.getInitTab()
		},
		
		mounted() {
			that = this;
			this.chooseTimed()
		},

		methods: {
			getInitTab(){
				for (var i = 0; i < this.shopInfo.tools.length; i++) {
					var item = this.shopInfo.tools[i]
					if ('salesman_stat_view' == item.code&&item.isShow) {
						this.listUtabs.push({
							name: "顾问统计"
						})
					}
				}
			},
			
			onChangeUtabs(item) {
				var index = item.index
				this.currentUtabs = index;
			},
			
			chooseTimed() {
				let date = new Date();
				const lastYear = new Date(date.setDate(date.getDate() - 365))
				date = new Date();
				const yesterday = new Date(date.setDate(date.getDate() - 1))
				this.calendar.minDate = utils.formatTime(lastYear,'yyyy-MM-dd')
				this.calendar.maxDate = utils.formatTime(yesterday,'yyyy-MM-dd')
				this.calendar.defaultDate = this.calendar.maxDate
				console.log("========calendar", this.calendar)
			},
			
			onChangeCalendar(e){
				// console.log("onChangeCalendar", e)
				if (e.length>=2){
					this.selectObj.startDay = e[0]
					this.selectObj.endDay = e[e.length-1]
					this.showCalendar = false
					this.onChangeSelectType(2)
				}
			},
			
			onChangeSelectType(index) {
				this.selectObj.selectType = index
				// switch(this.currentUtabs){
				// 	case 0:
				// 		this.$refs.statisticUserRef.refresh(this.selectObj.selectType, this.selectObj.startDay, this.selectObj.endDay)
				// 		break;
				// 	case 1:
				// 		this.$refs.statisticContentRef.refresh(this.selectObj.selectType, this.selectObj.startDay, this.selectObj.endDay)
				// 		break;
				// 	case 2:
				// 		this.$refs.statisticShareRef.refresh(this.selectObj.selectType, this.selectObj.startDay, this.selectObj.endDay)
				// 		break;
				// 	case 3:
				// 		this.$refs.statisticSellerRef.refresh(this.selectObj.selectType, this.selectObj.startDay, this.selectObj.endDay)
				// 		break;
				// }

			},
		}
	};
</script>

<style lang="scss">

	.tabContainer {
		width: 750rpx;
		background-color: #FFFFFF;
		border-bottom: 1px solid #f3f3f3;
		display: flex;
		flex-direction: column;
		position: sticky;
		top: 0;
		left: 0;
		margin-bottom: 20rpx;
		z-index: 9999;
	}
	
	.timeWrapper {
		display: flex;
		align-items: center;
		width: 750rpx;
		background: #FFFFFF;
		padding: 20rpx 0 15rpx;
		box-sizing: border-box;

		.item {
			padding: 0 20rpx;
			height: 45rpx;
			border-radius: 10rpx;
			text-align: center;
			line-height: 45rpx;
			background: #F3F1F3;
			font-size: 24rpx;
			color: #999999;
			margin-left: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.iconRange{
				width: 30rpx;
				height: 30rpx;
				margin-left: 15rpx;
				margin-right: 15rpx;
				background-image: url(@/static/image/icon_time_range.png);
			}
		}

		.itemEn {
			background: #5E9FFD;
			color: #FFFFFF;
		}
	}

</style>